<template>
	<view class="">
		<view class="c-show">
			<view class="show">
				家庭指导师展示
			</view>
			<view class="s-bar">
				
			</view>
		</view>
		<view class="card">
			<view class="c-item" v-for="(item,index) in tealist" :key="item.id" @click="godetail(item.id)">
				<uni-card >
					<view class="">
						<image class="c-img" :src="item.URLIMG" mode="aspectFill"></image>
					</view>
					<view class="eximg">
						<view class="nametitle">
							{{item.name}}
						</view>
						<view style="display: flex;font-size: 22rpx;justify-content: space-around;">
							<view style="display: flex;">
								<view class="profiletitle">
									性别:
								</view>
								<view class="profilecontent">
									{{item.sex}}
								</view>
							</view>
							<view style="display: flex;">
								<view class="profiletitle">
									联系:
								</view>
								<view class="profilecontent">
									{{item.tel}}
								</view>
							</view>
						</view>
						<view class="profile">
							<view class="profiletitle">
								工作经验
							</view>
							<view class="profilecontent">
								{{item.profile}}
							</view>
						</view>
						<view class="educationalidea">
							<view class="educationalideatitle">
								教育理念
							</view>
							<view class="educationalideacontent">
								{{item.educationalidea}}
							</view>
						</view>
					</view>
				</uni-card>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			tealist:{
				type:Array,
				default:[]
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			godetail(index){
				this.navigateTo({
					url:`/pages/tutordetail/tutordetail?tea_id=${index}`
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.c-show{
		text-align: center;
		margin-bottom: 20rpx;
		.show{
			padding: 30rpx 0;
			font-weight: 600;
		}
		.s-bar{
			border-bottom: 1rpx solid;
		}
		
	}
	.card {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		background-color: #cd5a91;
		.c-item {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			width: 100%;
			
			background-color: rgba(255, 255, 255, .5);
			.c-img{
				width: 150rpx;
				height: 150rpx;
			}
			.eximg{
				padding: 0 20rpx;
				width: 75%;
				
			}
			.nametitle{
				font-size: 32rpx;
				font-weight: 600;
				
			}
			.profile{
				
				.profiletitle{
					color: #cd5a91;
					font-size: 28rpx;
					font-weight: 600;
				}
				.profilecontent{
					font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
					font-size: 22rpx;
					 text-indent: 2em; /* 设置开头空两格 */
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					-webkit-line-clamp: 2; /* 控制显示的行数 */
				}
			}
			.educationalidea{
				
				.educationalideatitle{
					color: #cd5a91;
					font-size: 28rpx;
					font-weight: 600;
				}
				.educationalideacontent{
					font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
					font-size: 22rpx;
					 text-indent: 2em; /* 设置开头空两格 */
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					-webkit-line-clamp: 2; /* 控制显示的行数 */
				}
			}
		}

	}
	.item {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			width: 40px;
			height: 40px;
			background-color: #ebebeb;
			border-radius: 10px;
			margin: 5px;
		}
</style>